<template>
    <section :class="[absolute ? 'absolute' : '', 'full-loading']" v-show="loading">
        <Spin v-bind="$attrs" :tip="tip" :spinning="loading" />
    </section>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Spin } from 'ant-design-vue';

export default defineComponent({
    name: 'Loading',
    components: { Spin },
    props: {
        tip: {
            type: String,
            default: ''
        },
        size: {
            type: String,
            default: ''
        },
        absolute: {
            type: Boolean
        },
        loading: {
            type: Boolean,
            default: false
        },
        background: {
            type: String
        },
        fullScreen: {
            type: Boolean,
            default: false
        }
    }
});
</script>
<style lang="less" scoped>
.full-loading {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background-color: hsla(0, 0%, 100%, 0.4);
    &.absolute {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 300;
    }
}

.inner-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 300;
    background-color: hsla(0, 0%, 100%, 0.4);
}

html[data-theme='dark'] {
    .full-loading {
        background-color: rgba(0, 0, 0, 0.4);
    }
}
</style>
